<template>
  <Dialog ref="dialog" title="志愿表" :isSendBus="true">
    <el-tabs
      v-model="activeName"
      class="demo-tabs"
      @tab-click="handleClick"
      v-loading="isRequest"
    >
      <el-tab-pane label="专家" name="first">
        <expertList
          :volunteerList="volunteerList"
          @onClickOptionItem="onClickOptionItem"
        ></expertList>
      </el-tab-pane>
      <el-tab-pane label="学生" name="second">
        <studentList
          :volunteerList="volunteerList"
          @onClickOptionItem="onClickOptionItem"
        ></studentList>
      </el-tab-pane>
      <div class="right" style="margin-top: 20px">
        <el-config-provider :locale="zhCn">
          <el-pagination
            v-model:current-page="pageData.page"
            v-model:page-size="pageData.pageSize"
            :page-sizes="[10, 20, 30]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.total"
            @size-change="getzybList"
            @current-change="getzybList"
          />
        </el-config-provider>
      </div>
    </el-tabs>
  </Dialog>

  <volundeerDetails ref="volundeerDetailsRef"></volundeerDetails>
</template>

<script setup>
import volundeerDetails from '../../volunteer/module/volunteerDetails.vue';
import Dialog from '@/components/Dialog/Dialog.vue';
import studentList from './studentList.vue';
import expertList from './expertList.vue';
import { ref } from 'vue';
import { zyList } from '@/api/leader/Filling.js';
import { useRouter } from 'vue-router';
import { zySave } from '/src/api/appv2/appv2.js';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { ElMessage } from 'element-plus';

const router = useRouter();

const dialog = ref(null);
const activeName = ref('first');
const volunteerList = ref([]);
const isRequest = ref(false);

const volundeerDetailsRef = ref(null);
// const page = ref(1)

const pageData = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
});
// 父级传递的学生数据
const studentData = ref({});
// 学生信息
const studentInfo = ref({});

function openChange(val) {
  // 打开组件弹窗
  studentData.value = val;
  studentInfo.value = val.student;

  dialog.value.openChange();
  activeName.value = 'first';

  getzybList();
}

// 获取志愿表列表
function getzybList() {
  if (isRequest.value) return;
  isRequest.value = true;

  let data = {
    fronttype: 3,
    page: pageData.page,
    pageSize: pageData.pageSize,
    studentId: studentData.value.studentId,
    mod: 1,
  };

  if (activeName.value == 'first') {
    data['createFrom'] = '1,2';
  } else {
    data['createFrom'] = '0';
    data['isTeacherSee'] = 1;
  }

  zyList(data)
    .then((res) => {
      isRequest.value = false;
      let data = res.data;
      if (pageData.page == 1) {
        volunteerList.value = data.data;
      } else {
        volunteerList.value = [...volunteerList.value, ...data.data];
      }
      pageData.total = data.total;
    })
    .catch(() => {
      isRequest.value = false;
    });
}

function handleClick(val) {
  // 切换组件信息
  if (activeName.value != val.paneName) {
    volunteerList.value = [];
    activeName.value = val.paneName;
    getzybList();
  }
}

/**
 * 点击志愿表操作选项
 * @param {Number} index 下标
 * @param {Number} type 操作类型 0-查看 1-最终方案 2-同步至学生 3-删除 4-复制到专家
 */
function onClickOptionItem(index, type) {
  switch (type) {
    case 0: // 查看志愿表
      if (activeName.value == 'first') {
        seeVolunteer(index);
      } else {
        let volunteer = volunteerList.value[index];
        let body = {
          index: volunteer.index,
          zy_type: volunteer.zy_type,
          studentData: studentData.value,
        };

        volundeerDetailsRef.value.openChange(body);
      }
      break;
    case 1: // 最终方案
      break;
    case 2: // 同步至学生
      syncVolunteerToStudent(index);
      break;
    case 3: // 删除
      deleteVolunteer(index);
      break;
    case 4: // 复制到专家
      copyVolunteerToExpert(index);
      break;
    default:
      break;
  }
}

/**
 * 查看志愿表
 * @param {Number} index 志愿表下标
 */
function seeVolunteer(index) {
  let volunteer = volunteerList.value[index];
  let body = JSON.stringify({
    index: volunteer.index,
    zy_type: volunteer.zy_type || volunteer.zyType,
    status: volunteer.status,
    studentData: studentData.value,
  });

  router.push({
    path: '/leader/savevolunteer',
    query: {
      data: body,
    },
  });
}

/**
 * 同步志愿表到学生
 * @param {Number} index 志愿表下标
 */
function syncVolunteerToStudent(index) {
  let volunteer = volunteerList.value[index];
  volunteer.isStudentSee = volunteer.isStudentSee == 1 ? 0 : 1;

  let data = {};
  (data['index'] = volunteer.index),
    (data['studentId'] = studentData.value.studentId);
  data['isStudentSee'] = volunteer.isStudentSee;
  zySave(data).then(() => {
    // 修改成功
  });
}

/**
 * 删除志愿表
 * @param {Number} index 志愿表下标
 */
function deleteVolunteer(index) {
  let volunteer = volunteerList.value[index];
  let data = {};
  (data['index'] = volunteer.index),
    (data['studentId'] = studentData.value.studentId);
  data['operate'] = 'del';

  zySave(data).then(() => {
    // 删除成功
    volunteerList.value.splice(index, 1);
  });
}

/**
 * 复制志愿表到专家
 * @param {Number} index 志愿表下标
 */
function copyVolunteerToExpert(index) {
  let volunteer = volunteerList.value[index];
  zySave({
    index: volunteer.index,
    operate: 'copy',
    studentId: studentData.value.studentId,
  }).then(() => {
    ElMessage({
      type: 'success',
      message: '复制成功',
    });
  });
}

defineExpose({
  openChange,
});
</script>
<style lang="scss" scoped>
::v-deep(.el-tabs__item.is-active) {
  color: #1d2129;
  font-weight: 600;
}

::v-deep(.el-tabs__active-bar) {
  height: 3px;
  background-color: #1d2129;
}

::v-deep(.el-tabs__item) {
  height: 52px;
  line-height: 52px;
  color: #4e5969;
  font-size: 20px;
}
</style>
